<template>
  <div class="index">
    <div class="errorLedCount">异常LED总数：{{errorNum}} 个</div>
    <div class="ledArea">
      <div class="ledTabs">
        <div class="ledTabsItems" v-for="(item,ind) in array" :key="ind" @click="changeTabs(ind+1)">
          <div v-for="(item,index) in data" :key="index" v-if="index<4">
            <div v-for="(item2,index2) in item" :key="index2">
              <div class="dpSpot"></div>
            </div>
          </div>
          <div class="ledTabsTxt">
            <span>视图 {{ind+1}}</span>
          </div>
        </div>
      </div>
      <!-- <div>
        <div v-for="(item,index) in data" :key="index">
          <div v-for="(item2,index2) in item" :key="index2">{{item2.state}}</div>
        </div>
      </div>-->
      <div class="led">
        <div v-for="(item,index) in data" :key="index" v-if="index<500">
          <div v-for="(item2,index2) in item" :key="index2" class="dp">
            <div class="dpSpot"></div>
            <div class="dpLed1" v-if="item2.state === 0"></div>
            <div class="dpLed2" v-if="item2.state === 1"></div>
            <el-alert
              v-if="item2.state === 1"
              title="异常"
              type="success"
              :description="'坐标：'+item2.index"
            ></el-alert>
          </div>
        </div>
      </div>
    </div>
  </div>
</template>

<script>
import LEDData from '../../../assets/modelData/LED.json'
export default {
  name: 'index',
  data () {
    return {
      hello: 'hello',
      array: [1, 2, 3, 4, 5, 6],
      data: [],
      ledLnput: '',
      errorNum: 0
    }
  },
  created () {
    this.init()
  },
  methods: {
    init () {
      for (var i = 0; i < LEDData.data.length; i++) {
        this.getBitsPosition(LEDData.data[i])
      }
      console.log('r', this.data)
    },
    getBitsPosition (n) {
      var index = n.index
      var r = []
      for (var i = 0; i < 8; i++) {
        if ((n.state & 0x01) === 1) {
          r.push({
            'state': 1,
            'index': index
          })
          this.errorNum++
        } else {
          r.push({
            'state': 0,
            'index': index
          })
        }
        n.state = n.state >> 1
      }
      this.data.push(r)
    },
    changeTabs (item) {
      console.log('item', item)
    }
  }
}
</script>

<style scoped>
.errorLedCount {
  font-size: 20px;
  color: red;
  margin-bottom: 20px;
  margin-left: 100px;
}
.ledArea {
  display: flex;
  justify-content: center;
}
.ledTabs {
  width: 100px;
  position: relative;
  left: -10px;
}
.ledTabsItems {
  cursor: pointer;
  width: 98px;
  height: 98px;
  background-color: #000000;
  margin-bottom: 20px;
}
.ledTabsTxt {
  background-color: blue;
  color: red;
  font-size: 30px;
  font-weight: 900;
  height: 0px;
}
.ledTabsTxt span {
  position: relative;
  top: -38px;
  left: 6px;
}
.tabsviews {
  width: 8px;
  height: 8px;
  background-color: yellow;
}
.led {
  width: 1536px;
  height: 100%;
  /* zoom: 3; */
}
.dp {
  width: 14px;
  height: 14px;
  background-color: #000000;
  padding-bottom: 2px;
  padding-right: 2px;
  float: left;
}
.dpSpot {
  width: 2px;
  height: 2px;
  background-color: green;
}
.dpLed1 {
  width: 10px;
  height: 10px;
  background-color: yellow;
  margin-left: 4px;
  margin-top: 2px;
}
.dpLed2 {
  width: 10px;
  height: 10px;
  background-color: red;
  margin-left: 4px;
  margin-top: 2px;
}
.dpLedTitle {
  position: relative;
  left: 16px;
  color: #ffffff;
  background-color: #02020285;
  width: 100px;
  height: 50px;
}
</style>
<style>
.el-alert--success.is-light {
  width: 110px;
  background-color: #00000094;
  color: #ffffff;
}
.el-alert--success.is-light .el-alert__description {
  color: #ffffff;
}
</style>
